<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.list {
				width: 1226px;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.list .list-item {
				width: 18%;
			}

			.list .list-item img {
				width: 100%;
			}

			.list .list-item .goods-price {
				color: red;
				font-size: 14px;
				line-height: 20px;
			}

			.list .list-item .goods-name {
				font-size: 14px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;

				/* 注：
            -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它须要组合其余的WebKit属性。常见结合属性：
            display: -webkit-box; 必须结合的属性 ，将对象做为弹性伸缩盒子模型显示 。
            -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 */
			}
		</style>
	</head>

	<body>
		<div class="list">
			<!-- <div class="list-item">
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/11053/22/16472/164875/627c6640E9d621e44/e4e426ad69c699b2.jpg" alt="">
            </a>
            <div class="goods-price">￥2688.00</div>
            <div class="goods-name">【稀缺现货速发】华为手表WATCH GT3 Pro运动智能两周续航电话体温监测潜水</div>
        </div>
        <div class="list-item">
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/11053/22/16472/164875/627c6640E9d621e44/e4e426ad69c699b2.jpg" alt="">
            </a>
            <div class="goods-price">￥2688.00</div>
            <div class="goods-name">【稀缺现货速发】华为手表WATCH GT3 Pro运动智能两周续航电话体温监测潜水</div>
        </div>
        <div class="list-item">
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/11053/22/16472/164875/627c6640E9d621e44/e4e426ad69c699b2.jpg" alt="">
            </a>
            <div class="goods-price">￥2688.00</div>
            <div class="goods-name">【稀缺现货速发】华为手表WATCH GT3 Pro运动智能两周续航电话体温监测潜水</div>
        </div>
        <div class="list-item">
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/11053/22/16472/164875/627c6640E9d621e44/e4e426ad69c699b2.jpg" alt="">
            </a>
            <div class="goods-price">￥2688.00</div>
            <div class="goods-name">【稀缺现货速发】华为手表WATCH GT3 Pro运动智能两周续航电话体温监测潜水</div>
        </div>
        <div class="list-item">
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/11053/22/16472/164875/627c6640E9d621e44/e4e426ad69c699b2.jpg" alt="">
            </a>
            <div class="goods-price">￥2688.00</div>
            <div class="goods-name">【稀缺现货速发】华为手表WATCH GT3 Pro运动智能两周续航电话体温监测潜水</div>
        </div> -->
		</div>
	</body>
	<script>
		// 京东主页商品列表: https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=17_1421_1430_7471&source=pc-home&callback=jsonpMore2Goods&_=1657339112836

		// 参数解析:
		// page  页码
		// pagesize 每页显示多少条
		// area     地区
		// source   设备
		// callback 自定义回调函数
		
		// data = [{
		// 	t: 商品名称,
		// 	sku:商品编号,
		// 	img:图片地址  加前缀"https://img11.360buyimg.com/jdcms/s300x300_",
		// 	op:原价
		// 	jp:现价
		// }]



		// html = "";
		//             data.forEach(({goodsImg,goodsPrice,goodsMsg},index) => {
		//                 html += `<div class="list-item">
		//                     <a href="">
		//                         <img src="${goodsImg}" alt="">
		//                     </a>
		//                     <div class="goods-price">￥${goodsPrice}</div>
		//                     <div class="goods-name">${goodsMsg}</div>
		//                 </div>`;
		//             })


		//             listBox.innerHTML = html;
		
		

		function loadGoods(res) {
			console.log(res);
			var {success,data} = res;
				
			if(success){
				var listBox = document.getElementsByClassName("list")[0];
				var html = "";
				data.forEach(({sku,t,img,op,jp})=>{
					html += `<div class="list-item">
					                    <a href="">
					                        <img src="https://img11.360buyimg.com/jdcms/s300x300_${img}" alt="">
					                    </a>
					                    <div class="goods-price">￥${jp}</div>
					                    <div class="goods-name">${t}</div>
					                </div>`;
				})
				listBox.innerHTML = html;
			}
			
			
		}



		jsonp(
			"https://floor.jd.com/user-v20/feed/get?page=1&pagesize=25&area=17_1421_1430_7471&source=pc-home&callback=loadGoods&_=1657339112836")





		function jsonp(url, data = {}) {
			var script = document.createElement("script");
			if (data instanceof Object) { // 如果data是对象 => 解析为参数数据队列
				var list = [];
				for (var key in data) {
					var val = data[key];
					var item = key + "=" + val; // "user=a123123"
					list.push(item);
				}
				data = list.join("&");
				// console.log(data);
			}
			script.src = data ? url + "?" + data : url;
			document.head.appendChild(script);
			script.onload = function() {
				script.remove();
			}
		}
	</script>

</html>
